<template>
  <div class="flex" id="mulit-info-class">
    <cardinfo :data="cardData" v-if="cardData.CardID"></cardinfo>
    <userinfo :data="data"></userinfo>
    <stairinfo :data="data" v-if="data.f_price_type === '阶梯气价'"></stairinfo>
    <meter-use :data="data"></meter-use>
    <recordstoryinfo :data="data" v-ref:recordstoryinfo></recordstoryinfo>
  </div>
</template>

<script>
/**
*用户相关信息
*/
export default {
  title: '用户相关信息',
  data () {
    return {
    }
  },
  props: {
    data: {
      type: Object
    },
    cardData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  }
}
</script>
<style lang="less">
  #mulit-info-class {
    width: 280px;
    margin-right: 20px;
    overflow-y: auto;
    > div {
      height: auto;
      margin-bottom: 8px;
    }
  }
  // 内容显示样式
  .control-label {
    height: 23px;
    border-right: 1px solid #F2F6FA;
    margin-bottom: 0;
    text-align: left;
  }

  .info-content {
    padding:6px;
    span {
      padding-left: 5px;
    }
  }
// 信息区域的表格显示紧凑
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
